<template>
  <div class="mark-container" v-show="isMark">
    <div class="main" ref="markMain">
      <span class="close-btn" @click="markClose">
        <i class="iconfont icon-quxiao"></i>
      </span>
      <mavon-editor class="mavon-editor" v-model="text" :subfield="false" :defaultOpen="setting.defaultOpen"
        :toolbarsFlag="setting.toolbarsFlag" :previewBackground="setting.previewBackground"
        :codeStyle="setting.codeStyle" :editable="setting.editable" :scrollStyle="setting.scrollStyle" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

interface Props {
  isMark?: Boolean;
  markDown?: String;
}

const props = withDefaults(defineProps<Props>(), {});
// 处理全屏
const markMain = ref<HTMLElement>();
const handleFullScreen = () => {
  const element = markMain.value;
  if (element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    }
  }
};
let text = ref("");
watch(
  () => props.isMark,
  (newVal) => {
    // 处理 isMark 变化的逻辑
    if (newVal) {
      text.value = props.markDown as string;
    } else {
      if (markMain.value) {
        markMain.value.scrollTop = 0
      }
    }
  },
);
const setting = {
  subfield: false, // 单双栏模式
  defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
  editable: false,
  toolbarsFlag: false,
  scrollStyle: true,
  previewBackground: "#303030",
  codeStyle: "androidstudio",
};
const emit = defineEmits(["closeMark"]);
const markClose = () => {
  emit("closeMark");
};
</script>

<style scoped lang="scss">
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-10px);
  }

  20% {
    transform: translateX(10px);
  }

  30% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(-10px);
  }

  60% {
    transform: translateX(10px);
  }

  70% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  90% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}


.mark-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;


  .main {
    position: relative;
    width: 70%;
    height: 85%;
    overflow-y: scroll;
    border: 10px solid #000000;
    border-radius: 5px;
    padding: 40px;

    .close-btn {
      position: fixed;
      top: 6%;
      right: 14%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000000;
      color: #ffffff;
      font-weight: bold;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1001;

      .icon-quxiao {
        font-size: 20px;
      }
    }

    .full-screen {
      top: 14%;
    }

    &::-webkit-scrollbar {
      width: 0;
      /* 滚动条宽度 */
    }
  }
}


:deep(.v-note-wrapper) {
  z-index: 99;
}

:deep(.v-show-content) {
  border-radius: 5px;
}

:deep(.single-show) {

  .hljs {
    border-radius: 2px;
    padding: 10px;
    background-color: #212121 !important;
  }
}
</style>
